<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="骡窝窝商城" http-equiv="keywords">
    <meta name="description" content="骡窝窝商城">
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <title>骡窝窝商城</title>
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <link rel="stylesheet" href="css/zy.css" type="text/css">
    <link rel="stylesheet" href="css/swiper.min.css" type="text/css">
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        $(function () {
            //获取url上的参数值
            var param = getParams();
            $(".jia").click(function () {

            });
            //获取当前用户的购物车信息
            $.get("/users/" + param.id + "/shoppingCarts", function (data) {
                var temp;
                console.log(data);
                //渲染
                $(".product").renderValues(data, {
                    getImgUrl: function (item, value) {
                        if (value) {
                            temp = value[0];
                            $(item).attr("src", temp);
                        }

                    }
                });

                //循环遍历标签并循环设置赋值
                $.each($("input[id='count']"), function (item, ele) {
                    $(ele).val(data.list[item].count);
                });

                //数量的递减
                $(".jian").click(function () {
                    var num = $(this).next().val();
                    if (num > 0) {
                        num--;
                    }
                    //减的下一个元素,就是数量
                    $(this).next().val(num);
                });


                //数量的递增
                $(".jia").click(function () {
                    var num = $(this).prev().val();
                    if (num > 0 || num == 0) {
                        num++;
                    }
                    $(this).prev().val(num);
                });


                    //总价
                    var tPrice = 0;
                    //计数
                    var count = 0;
                    //勾选按钮绑定点击事件
                    $(".i1").click(function () {
                        var temp = $(this).data("flag");
                        //如果标志为true
                        if (temp) {
                            //变换勾选状态
                            $(this).removeClass("i1 i1").addClass("i1 i1-i");
                            //重设标志
                            $(this).data("flag", false);
                            //获取价格转换成数字
                            var num = Number($(".price").html());
                            //获取自定义属性data-cid的值
                            var sl =$(this).data("cid");
                            var SL=$("input[data-cid='"+sl+"']").val();
                                tPrice = tPrice + num*SL;
                            $(".tPrice").html(tPrice);
                            count++;
                            $(".count").html(count);
                        } else {
                            $(this).removeClass("i1 i1-i").addClass("i1 i1");
                            $(this).data("flag", true);
                            var num = Number($(".price").html());
                            //获取自定义属性data-cid的值
                            var sl =$(this).data("cid");
                            var SL=$("input[data-cid='"+sl+"']").val();
                            tPrice = tPrice - num*SL;
                            $(".tPrice").html(tPrice);
                            count--;
                            $(".count").html(count);
                        }
                    });
                });
                //页面跳转到结算页面
                $("#url").click(function () {
                    var Arr = [];
                    var cids = [];
                    Arr = $(".i1-i");
                    for (var i = 0; i < Arr.length; i++) {
                        var cid = $(Arr[i]).data("cid");
                        cids.push(cid);
                    }
                    ;
                    var url = $(this).data("url");
                    parent.location.href = url + cids + "&id=" + param.id;
                });
            });
    </script>
</head>

<body>
<!--页面内容
<div id="yemnr">-->
<!--头部-->
<div class="toub_beij toub_beij_zy">
    <div class="zhongj_k zhongj_k_z">
        <div class="jiu_feo">
            <div class="logo_k logo_k_fanh"><a href="javascript:history.go(-1);"><img class="fanh_ann"
                                                                                      src="images/web/fanh.png"></a>
            </div>
            <div class="zhongjain_daoh">
                <ul>
                    <li><a class="zyyge">购物车</a></li>
                </ul>
            </div>
        </div>
        <div class="dengl">
            <div class="caid_img" id="zhu_caid"><img src="images/web/cd_1.png"></div>
            <ul class="zhu_daoh" id="daoh_lb">
                <em></em>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">商品分类</a></li>
                <li><a href="#">扫一扫</a></li>
                <li><a href="shoppingCart.html">购物车</a></li>
                <li class="wu"><a href="#">我的商城</a></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    //滑动头部透明（针对首页头部用）
    window.onscroll = function () {

        var autoheight = document.body.scrollTop || document.documentElement.scrollTop;
        if (autoheight > 10) {
            $(".toub_beij").css("position", "fixed")
        } else {
            $(".toub_beij").css("position", "relative")
        }
    }
</script>
<!--内容-->
<!--<div class="weidl_dl">
	<p>立即登录，同步电脑和手机购物车中的商品 <a href="wanagid_DengLu.html">登录</a></p>
</div>-->
<div class="gouwuc_kk">
    <ul>
        <li>
            <div class="dianpmc_gw"><a href=""><p class="px24">骡窝窝官方旗舰店</p></a></div>
            <div class="product">
                <div render-loop="list">
                    <div class="diannao_shanp">
                        <i class="i1 i1" data-flag="true" render-attr="data-cid=list.id"></i>
                        <!--render-src="list.product.imgArr"-->
                        <a href="商品页面.html"><h1><img id="img" render-key="list.product.imgArr" render-fun="getImgUrl">
                        </h1></a>
                        <div class="you">
                            <a href="商品页面.html"><p class="px24 bt" render-html="list.product.title"></p></a>
                            <p class="xh" render-html="list.specs.name"></p>
                            <div class="youjfy">
                                <div class="goum_sl xiangq_shangp_m">
                                    <div class="xq_jiaq"><p>￥<em class="price" render-html="list.product.price"></em>.00
                                    </p></div>
                                    <div class="counter_box">
                                        <i class="jian">-</i>
                                        <input render-attr="data-cid=list.id" id="count" type="text">
                                        <i class="jia">+</i>
                                    </div>
                                </div>
                            </div>
                            <div class="bianj">
                                <a href="#"><p><i></i>移入收藏</p></a>
                                <a href="#" class="ayou"><p><i class="sc"></i>删除</p></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<!--底部导航-->
<!---->
<div class="dib_daoh_b">
    <div class="gouwuc_ gouwuc_yem">
        <div class="zuo">
            <i id="all" class="i1" data-flag="true"><p>全选</p></i>
        </div>
        <div class="zhong"><p>总计：￥<em class="tPrice">0</em>.00</p></div>
        <div class="you">
            <div class="goum">
                <a id="url" data-url="orderPage.html?cids=" style="color: white">去结算(
                    <en class="count">0</en>
                    )
                </a>
            </div>
        </div>
    </div>
</div>
</div>

<!--大框div
</div>-->
<!--搜索页面-->
</body>
</html>

<script type="text/javascript">
    window.onload = function () {
        var TheMenu = document.getElementById('zhu_caid');
        var LieBiao = document.getElementById('daoh_lb');
        var Html = document.getElementsByTagName("html")[0];//0 第一个数组
        TheMenu.onclick = function (event) {
            if (LieBiao.style.display == 'block') {
                LieBiao.style.display = 'none';
            }
            else {
                LieBiao.style.display = 'block';
            }
            event.stopPropagation();//阻止冒泡事件
        }
        Html.onclick = function () {
            LieBiao.style.display = 'none';
        }

        //

    };

</script>